<template>
    <div class="container" v-if="!showDetail">
        <div class="header">
            <div class="title">文档资料列表</div>
            <el-button 
                style="margin-left:30px;" 
                @click.prevent="handleAdd" 
                type="primary" 
                plain 
                size="medium"
                v-permission="{ permission: '添加文档资料', type: 'disabled' }"
            >添加文档资料</el-button>
        </div>
        <el-table stripe v-loading="loading" :data="tableData">
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click.prevent="handleDetail(scope.row)" type="primary" plain size="mini">查看</el-button>
                <el-button
                  @click.prevent="handleDelete(scope.row)"
                  type="danger"
                  plain
                  size="mini"
                  v-permission="{ permission: '删除文档资料', type: 'disabled' }"
                  >删除</el-button
                >
              </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :background="true"
              :page-size="pageCount"
              :current-page="currentPage"
              v-if="refreshPagination"
              layout="prev, pager, next, jumper"
              :total="totalNums"
            ></el-pagination>
        </div>
    </div>
    <create-edit v-else :isCreate="isCreate" :documentId="documentId" @dialogClose="dialogClose"></create-edit>
</template>
<script>

    import DocumentModel from '@/model/document'

    import createEdit from './create-edit'

    export default {
        components: {
            createEdit,
        },
        data() {
            return {
                tableData: [],
                loading: false,
                totalNums: 0,
                currentPage: 1,
                pageCount: 10,
                refreshPagination: true,
                isCreate: true,
                showDetail: false,
                documentId: 0,
            }
        },
        async created() {
            this.loading = true
            this.getLists()
            this.loading = false
        },
        methods: {
            async getLists() {
                const page = this.currentPage - 1
                const count = this.pageCount
                const res = await DocumentModel.getAll(page, count)
                this.tableData = res.items
                this.totalNums = res.total
            },
            async handleCurrentChange(val) {
                this.currentPage = val
                this.loading = true
                this.getLists()
                this.loading = false
            },
            handleAdd() {
                this.showDetail = true
                this.isCreate = true
                this.documentId = 0
            },
            handleDetail(val) {
                this.showDetail = true
                this.documentId = val.id
                this.isCreate = false
            },
            handleDelete(val) {
                let res
                this.$confirm('此操作将永久删除该文档资料，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    try {
                    this.loading = true
                    res = await DocumentModel.delete(val.id)
                    } catch (e) {
                    this.loading = false
                    }
                    if (res.code < window.MAX_SUCCESS_CODE) {
                        this.loading = false
                        if (this.totalNums % this.pageCount === 1 && this.currentPage !== 1) {
                            this.currentPage--
                        }
                        this.getLists()
                        this.$message({
                            type: 'success',
                            message: `${res.message}`,
                        })
                    } else {
                        this.loading = false
                        this.$message.error(`${res.message}`)
                    }
                })
            },
            dialogClose() {
                this.showDetail = false
                this.getLists()
            }
        },
    }
</script>
<style lang="scss" scoped>
    @import '@/assets/style/list.scss'
</style>